/**
 * @typedef {Object} COLORS определяет цвета кнопки
 * @property {string} primary - основной цвет
 * @property {string} secondary - вторичный цвет
 * @property {string} success - цвет успеха
 * @property {string} danger - цвет опасности
 * @property {string} warning - цвет предупреждения
 * @property {string} info - цвет информации
 * @property {string} dark - темный цвет
 * @property {string} link - цвет ссылки
 */
export const COLORS = {
  primary: '#0D6EFD',
  secondary: '#6C757D',
  success: '#198754',
  danger: '#DC3545',
  warning: '#FFC107',
  info: '#0DCAF0',
  dark: '#343A40',
  link: '#FFF',
};

/**
 * @typedef {Object} DIMENSION определяет размер кнопки
 * @property {Object} lg - большой размер
 * @property {string} lg.width - ширина большого размера
 * @property {string} lg.height - высота большого размера
 * @property {Object} sm - маленький размер
 * @property {string} sm.width - ширина маленького размера
 * @property {string} sm.height - высота маленького размера
 */
export const DIMENSION = {
  lg: {
    width: '8.75rem',
    height: '3rem',
  },
  sm: {
    width: '6.25rem',
    height: '1.875rem',
  },
};

/**
 * @typedef {Object} SHAPE определяет форму кнопки
 * @property {string} default - форма по умолчанию
 * @property {string} pill - форма пилюли
 */
export const SHAPE = {
  default: '0.3125rem',
  pill: '1.25',
};

/**
 * @typedef {Object} DEFAULT_DIMENSION определяет размер кнопки по умолчанию
 * @property {width} width - ширина кнопки по умолчанию
 * @property {height} height - высота кнопки по умолчанию
 */
export const DEFAULT_DIMENSION = {
  width: '6.0625rem',
  height: '2.375rem',
};

/**
 * @typedef {Object} ROUND определяет закругление кнопки
 * @property {string} sm - маленькое закругление
 * @property {string} lg - большое закругление
 */
export const ROUND = {
  sm: '0.3125rem',
  lg: '1.25rem',
};

/**
 * @typedef {Object} FONT_DIMENSION определяет размер шрифта кнопки
 * @property {string} sm - маленький размер
 * @property {string} lg - большой размер
 * @property {string} df - по умолчанию
 */
const FONT_DIMENSION = {
  sm: '0.875rem',
  lg: '1.25rem',
  df: '1rem',
};

/**
 * @typedef {Object} LETTER_SPACING определяет интервал между буквами в шрифте кнопки
 * @property {string} sm - маленький интервал
 * @property {string} lg - большой интервал
 * @property {string} df - по умолчанию
 */
const LETTER_SPACING = {
  sm: '0.0291875rem',
  lg: '0.03125rem',
  df: '0.0285625rem',
};

/**
 * @typedef {Object} DIMENSION_MAP определяет размер шрифта и интервал между буквами кнопки
 * @property {Object} lg - большой размер
 * @property {string} lg.fontSize - размер шрифта для большого размера
 * @property {string} lg.letterSpacing - интервал между буквами для большого размера
 * @property {Object} sm - маленький размер
 * @property {string} sm.fontSize - размер шрифта для маленького размера
 * @property {string} sm.letterSpacing - интервал между буквами для маленького размера
 * @property {Object} df - размер по умолчанию
 * @property {string} df.fontSize - размер шрифта для размера по умолчанию
 * @property {string} df.letterSpacing - интервал между буквами для размера по умолчанию
 */
export const DIMENSION_MAP = {
  lg: {
    fontSize: FONT_DIMENSION.lg,
    letterSpacing: LETTER_SPACING.lg,
  },
  sm: {
    fontSize: FONT_DIMENSION.sm,
    letterSpacing: LETTER_SPACING.sm,
  },
  df: {
    fontSize: FONT_DIMENSION.df,
    letterSpacing: LETTER_SPACING.df,
  },
};

/**
 * @typedef {Object} COLOR_MAP_OUTLINE - цвета иконки для кнопки с контуром
 * @property {string} link - цвет ссылки
 * @property {string} primary - основной цвет
 * @property {string} secondary - вторичный цвет
 * @property {string} success - цвет успеха
 * @property {string} danger - цвет опасности
 * @property {string} warning - цвет предупреждения
 * @property {string} info - цвет информации
 * @property {string} dark - темный цвет
 */
export const COLOR_MAP_OUTLINE = {
  link: COLORS.primary,
  primary: COLORS.primary,
  secondary: COLORS.secondary,
  success: COLORS.success,
  danger: COLORS.danger,
  warning: COLORS.warning,
  info: COLORS.info,
  dark: COLORS.dark
};

/**
 * @typedef {Object} COLOR_MAP - цвета иконки для заполненной кнопоки
 * @property {string} link - цвет ссылки
 * @property {string} primary - основной цвет
 * @property {string} secondary - вторичный цвет
 * @property {string} success - цвет успеха
 * @property {string} danger - цвет опасности
 * @property {string} warning - цвет предупреждения
 * @property {string} info - цвет информации
 * @property {string} dark - темный цвет
 */
export const COLOR_MAP = {
  link: COLORS.link,
  primary: '#FFF',
  secondary: '#FFF',
  success: '#FFF',
  danger: '#FFF',
  warning: '#FFF',
  info: '#FFF',
  dark: '#FFF'
}
